<!-- 直播间item -->
<template>
	<view @click="click_message" class="flex_col" style="margin: 0 24rpx;width: 702rpx;border-radius: 4rpx;">
		<view style="font-size: 22rpx;color: grey;margin:20rpx;" class="full_width center flex_col">{{message.date_time}}</view>
		<view style="background-color: white;border-radius: 4rpx;padding-top: 16rpx;" class="flex_col  full_width">
			<!-- 标题 -->
			<view class="flex_row" style="align-items: center;">
				<view style="width: 20rpx;"/>
				<view v-if="!message.is_read" style="height: 12rpx;background-color: red;margin-right: 10rpx;width: 12rpx;border-radius: 6rpx;"/>
				<view style="font-size: 28rpx;color: black;font-weight: bold;">{{message.status}}</view>
			</view>
			<!-- 分割线 -->
			<view style="height: 2rpx;background-color: #F5F5F5;margin:20rpx 0;" class="full_width"/>
			<view class="flex_row" style="padding: 20rpx;">
				<!-- <image mode="aspectFit"></image> -->
				<fl_image :src="message.picture_url" mode="aspectFit" height="140" width="140"/>
				<view class="flex_col" style="margin-left: 20rpx;">
					<view class="two_lines" style="font-size: 28rpx;color: #5C6668;height: 80rpx;width: 456rpx;">{{message.title}}</view>
					<view style="font-size:24rpx;color: #8D9090;margin-top: 8rpx;" class="single_line">{{message.order_num}}</view>
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	// status 
// title 
// order_num 
// date_time 
// picture_url 
	import fl_image from "../fl_image.vue"
	export default {
		components: {
			fl_image,
		},
		name: "message_item",
		data() {
			return {

			};
		},
		created() {

		},
		props:{
			message:{
				type:Object,
				default:null
			}
		},
		methods: {
			click_message(){
				this.$emit("click_message",this.message)
			}
		},
		created() {
			
		},
	}
</script>

<style>
	.background {
		background-image: url("http://pic1.win4000.com/wallpaper/e/57bff12242d98.jpg");
	}

	.gridient_back {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
	}
</style>
